<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>目标识别算法测试</title>
	<link rel="stylesheet" href="styles/lib/bootstrap.min.css" />
	<script src="scripts/lib/bootstrap.bundle.min.js" defer></script>
	<link rel="stylesheet/less" href="styles/style.less" />
	<link rel="stylesheet/less" href="styles/plugin.less" />
	<script src="scripts/lib/less.js" defer></script>
	<script type="module" src="scripts/main.js" defer></script>
</head>

<body>
	<header>
		<div class="title">目标识别算法测试</div>
	</header>
	<div class="status-bar">
		<div class="status">未收到输入图像</div>
		<div class="progress-box">
			<strong id="progress-desc"></strong>
			<div class="progress" role="progressbar">
				<div class="progress-bar progress-bar-striped bg-success"></div>
			</div>
			<strong id="progress-percent">0%</strong>
		</div>
	</div>
	<main>
		<section class="left">
			<div class="subtitle">
				<h5>输入图片</h5>
			</div>
			<div class="photo-wall"></div>
		</section>
		<section class="right">
			<div class="subtitle">
				<h5>识别结果</h5>
			</div>
			<div class="canvas-box">
				<canvas id="preview" width="860" height="660"></canvas>
				<div class="left-btn visually-hidden">
					<img src="icons/chevron-left.svg" />
				</div>
				<div class="right-btn visually-hidden">
					<img src="icons/chevron-right.svg" />
				</div>
			</div>
		</section>
	</main>
	<footer>
		<div class="address">
			<label for="local-ip">本地IP：</label>
			<input type="text" class="form-control" maxlength="20" id="local-ip" disabled />
			<label for="local-port">监听端口：</label>
			<input type="text" class="form-control" maxlength="6" id="local-port" disabled />
		</div>
	</footer>
	<div id="toast" class="toast align-items-center text-bg-warning border-0 position-" role="alert" aria-live="assertive"
		aria-atomic="true">
		<div class="d-flex">
			<div class="toast-body">
			</div>
			<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
				aria-label="Close"></button>
		</div>
	</div>
</body>

</html>